<template>
  <div class="aa">
    <van-nav-bar
      title="重置密码"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #f9f9f9"
    />
    <div id="chongzhi">
      <van-cell-group>
        <van-field
          v-model="value1"
          name="extra"
          placeholder="输入手机号码"
          style="background-color: #f9f9f9"
        >
          <template #left-icon>
            <div>
              <img
                src="../../assets/shouji.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
        </van-field>

        <van-field
          v-model="sms"
          center
          clearable
          placeholder="短信验证码"
          style="background-color: #f9f9f9"
        >
        <template #left-icon>
            <div>
              <img
                src="../../assets/daunxin.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
          <template #button>
            <van-button size="small"  style="border:none ;  background-color:#f9f9f9">发送验证码</van-button>
          </template>
        </van-field>

        <van-field
          v-model="value2"
          style="background-color: #f9f9f9"
          placeholder="输入新的登录密码"
        >
          <template #left-icon>
            <div>
              <img
                src="../../assets/suo.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
          <template #right-icon>
            <div>
              <van-switch
                v-model="checked"
                active-color="#cccccc"
                inactive-color="#dcdee0"
                size="20px"
              />
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <van-button type="primary" size="large" style="border-radius: 30px; height: 40px;  width:320px ; margin-top: 30px; " color="#1abc9c" >登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      value2:'',
      value1:'',
      sms:'',
      checked:false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickLeft(){
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped lang="less">
.aa {
  background: #f9f9f9;
  height: 100vh;
}
.geshi {
  width: 20px;
  height: 20px;
}
#chongzhi {
  margin-top: 120px;
  box-sizing: border-box;
  padding: 0 30px;
}
</style>
